<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useRoute,useRouter} from 'vue-router'
import { useStore } from '../store'
import { ref } from 'vue';
    export default {
        setup() {
            let route=useRoute()
            let router=useRouter()
            let store=useStore()

            let dataFun=reactive({
                list:null,
                index:null,
                url:null,
                title:null,
                shopid:null,
                text:null,
            })
            const fileList = ref([]);
            // console.log(fileList.value);

            function getData(){
                dataFun.index=route.query.index
                console.log(dataFun.index);
                dataFun.url=store.evaluated[dataFun.index].url
                dataFun.title=store.evaluated[dataFun.index].title
                dataFun.shopid=store.evaluated[dataFun.index].shopid
            }
            getData()

            let release=()=>{
                console.log(fileList.value);
                store.mycomment.push({
                    text:dataFun.text,
                    fileList:fileList.value,
                    shopid:dataFun.shopid
                })
                store.evaluated.splice(dataFun.index,1)
                router.push({
                    path:"/center"
                })
            }
            
            return {
                ...toRefs(dataFun),
                fileList,
                release
            }
        },
    }
</script>


<template>
    <div class="comment">
        <div class="wrapper">
      <div class="header">
        <router-link
          to="/user"
          class="header_left icon_coo icon-a-ziyuan558"
        ></router-link>
        <div class="header_center">发表评价</div>
        <div class="header_right"  @click="release">发布</div>
      </div>
      <div class="bodyer">
        <div class="img">
            <img src="https://gw.alicdn.com/imgextra/i3/859515618/O1CN01UsdbAw1rN5pZCmVS8_!!859515618.jpg_Q75.jpg_.webp" alt="">
        </div>
        <div class="bodyer_top">
            <p class="type">{{title}}</p>
            <!-- <div class="score">
                <div class="star">
                    <p>评分：</p>
                <van-rate v-model="value" color="#fc9632" />
                </div>
                <p>好评</p>
            </div> -->
        </div>
        <div class="bodyer_center">
            <!-- <input class="inp" type="text"> -->
            <textarea name="" id="" placeholder="发表评价..." cols="30" rows="10" v-model="text"></textarea>
        </div>
        <div class="bodyer_bottom">
            <van-uploader v-model="fileList" multiple  />
            <!-- :after-read="afterRead" -->
        </div>
      </div>
    </div>
    </div>
</template>


<style lang="scss" scoped>
.comment{
    .wrapper {
        .header {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 0 16px;
        position: sticky;
        left: 0;
        top: 0;
        z-index: 5;

        .header_left {
            color: #333;
            font-size: 16px;
            line-height: 50px;
        }
        .header_center {
            font-size: 18px;
            padding-left: 32px;
        }
        .header_right {
            // width: 20px;
            padding: 5px 10px;
            color: #fff;
            border-radius: 15px;
            background-image: linear-gradient(90deg,#fcc332,#fc9632);
        }
        }
        .bodyer{
            background-color: #fff;
            margin: 50px 16px 16px;
            border-radius: 8px;
            position: relative;
            .img{
                position: absolute;
                left: 50%;
                top: 0;
                transform: translateX(-50%) translateY(-40%);
                width: 70px;
                height: 70px;
                img{
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                }
            }
            .bodyer_top{
                padding: 50px 50px 0;
                &>p{
                    color: #999;
                    font-size: 14px;
                    line-height: 30px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
                .score{
                    display: flex;
                    justify-content: space-between;
                    .star{
                        display: flex;
                    }
                    p{
                        color: #999;
                        font-size: 14px;
                    }
                }
            }
            .bodyer_center{
                padding: 20px 16px;
                font-size: 14px;
                height: 160px;
                textarea {
                    border: 0;
                    width: 100%;
                    height: 100%;
                    resize: none;
                }
            }
            .bodyer_bottom{
            padding: 0 16px;
            .van-uploader ::v-deep .van-uploader__wrapper{
                justify-content: space-between;
            }
            .van-uploader ::v-deep .van-uploader__preview-image{
                    width: 87px;
                    height: 87px;
            }
            .van-uploader ::v-deep .van-uploader__upload{
                    width: 87px;
                    height: 87px;
            }
            }
        }
    }
}
</style>